.alfresco-forms-controls-PushButtonsControl {
   box-sizing: border-box;
   line-height: 20px;
   margin-top: 2px;
   overflow: hidden;
   position: relative;

   &__input {
      height: 0;
      left: -100%;
      position: absolute;
      width: 0;

      &:checked + label {
         background: @push-button-background-checked;
         border-color: @push-button-border-color-checked;
         color: @push-button-text-color-checked;
      }
      &:hover + label {
         background: @push-button-background-hover;
         border-color: @push-button-border-color-hover;
         color: @push-button-text-color-hover;
      }
      &:focus + label {
         background: @push-button-background-hover;
         border-color: @push-button-border-color-hover;
         color: @push-button-text-color-hover;
      }
      &:checked {
         &:focus + label, &:hover + label {
            background: @push-button-background-focus;
            border-color: @push-button-border-color-focus;
            color: @push-button-text-color-focus;
         }
      }
   }

   &--simple-layout {

      .alfresco-forms-controls-PushButtonsControl {
         &__label {
            min-width: @push-button-min-width;
            max-width: @push-button-max-width;
            white-space: nowrap;
            margin-right: @push-button-margin;
            margin-bottom: @push-button-margin;
         }
      }
   }

   &__label {
      border: 1px solid @push-button-border-color;
      border-radius: @push-button-border-radius;
      box-sizing: inherit;
      color: @push-button-text-color;
      background: @push-button-background;
      border-color: @push-button-border-color;
      cursor: pointer;
      display: inline-block;
      float: left;
      font-size: @small-font-size;
      line-height: @push-button-line-height;
      text-align: center;
      transition: background .2s ease-out, color .2s ease-out;
      &__content {
         margin: 0 16px;
         overflow: hidden;
         text-overflow: ellipsis;
      }
   }
}

.alfresco-forms-controls-PushButtons {
   &.grey-gradient {
      .alfresco-forms-controls-PushButtonsControl {
         line-height: 50px;
         &__input {
            &:checked + label {
               background: #e89f57 linear-gradient(to bottom, #f6b65e, #d5975a);
               border-color: #666;
               box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .3);
               color: @primary-font-color;
            }
            &:focus + label, &:hover + label {
               background: #eee linear-gradient(to bottom, #fff, #ddd);
            }
            &:checked {
               &:focus + label, &:hover + label {
                  background: #f8c681 linear-gradient(to bottom, #fdd49d, #f6b65e);
               }
            }
         }
         &__label {
            background: #ddd linear-gradient(to bottom, #eee, #ccc);
            border: 1px solid #aaa;
            border-radius: 0;
            font-size: @normal-font-size;
            transition: all .1s ease-in;
         }
      }
   }
}
